<template>
  <div class="StaffDetail">
    <h4>员工信息</h4>
    <div v-if="dataInfo" class="search-key">
      <div class="left">
        <div class="ele-custom">
          <p>
            <b>ID:</b><span>{{ dataInfo.id }}</span>
          </p>
          <p>
            <b>姓名:</b><span>{{ dataInfo.userName }}</span>
          </p>
          <p>
            <b>联系方式:</b><span>{{ dataInfo.phone }}</span>
          </p>
        </div>
        <p>
          <b>角色管理:</b>
          <span
            v-if="dataInfo.roles.split(',').includes('0')"
          >配送员</span>
          <span
            v-if="dataInfo.roles.split(',').includes('1')"
          >配货员</span>
          <span
            v-if="dataInfo.roles.split(',').includes('2')"
          >维护</span>
        </p>
        <p>
          <b>门店:</b>
          <span
            v-for="(item, index) in dataInfo.storeInfo"
            :key="index"
          >
            {{ item.storeName }}
          </span>
        </p>
        <p>
          <b>IC卡:</b><span>{{ dataInfo.icCard }}</span>
        </p>
      </div>
      <div class="right">
        <div>
          <b>待结算费用:</b>
          <p>
            ￥{{ parseFloat(dataInfo.waitSettle || 0).toFixed(2) }}
          </p>
        </div>
        <div>
          <b>已结算费用:</b>
          <p>￥{{ parseFloat(dataInfo.settled || 0).toFixed(2) }}</p>
        </div>
      </div>
    </div>
    <div class="radio-group">
      <el-radio-group v-model="BindForm.sendStat" @change="handelSend">
        <el-radio-button label="1">待配货</el-radio-button>
        <el-radio-button label="2">待送货</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="BindForm.pickStat" @change="handelpickStat">
        <el-radio-button label="0">待取货</el-radio-button>
        <el-radio-button label="1">待维护</el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="BindForm.isSettle" @change="handelisSettle">
        <el-radio-button label="0">待结算</el-radio-button>
        <el-radio-button label="1">已结算</el-radio-button>
      </el-radio-group>
    </div>
    <div class="data-table">
      <el-table v-loading="loading" :data="Bindata" stripe row-key="id" border>
        <el-table-column type="selection" width="55" />
        <el-table-column label="" min-width="40">
          <template>
            <div class="div-baoguo">包裹1</div>
          </template>
        </el-table-column>
        <el-table-column label="商品" width="300" class="box">
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.goodsVoList"
              :key="index"
              class="mesSty"
            >
              <img class="imgSty" :src="item.goodsDetail.goodsPic" alt="错误">
              <div class="mesFont">
                <p>
                  {{ item.goodsDetail.goodsName }}
                </p>
                <p class="pb_sty">
                  <span>规格:{{ item.goodsDetail.goodsSpec }}</span>
                </p>
                <p>购买数量:{{ item.goodsDetail.number }}</p>
              </div>
            </div>
            <!-- 提示 -->
            <div class="item">
              <span
                style="margin-left:1%"
              >订单编号：{{ scope.row.orderCode }}</span>
              <span class="hint_pr">下单日期：{{ scope.row.createTime }}</span>
              <span class="hint_pr">门店：{{ scope.row.storeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100" label="配货">
          <template scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostDistributionVo.username }}</p>
              <p>
                配货费:{{ item.orderCostDistributionVo.fee }} -费用名称:{{
                  item.orderCostDistributionVo.feeName
                }}
              </p>
              <!-- <p style="color: rgba(29, 221, 71, 0.877);">审核通过</p> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="送货">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostPickUpVo.username }}</p>
              <p>
                配货费:{{ item.orderCostPickUpVo.fee }} -费用名称:{{
                  item.orderCostPickUpVo.feeName
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="取货">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <p>{{ item.orderCostMaintainVo.username }}</p>
              <p>
                配货费:{{ item.orderCostMaintainVo.fee }} -费用名称:{{
                  item.orderCostMaintainVo.feeName
                }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column min-width="140" align="center" label="订单状态">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.goodsVoList" :key="index">
              <span>{{ item.orderStat }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              disabled
              @click="$router.push({ name: '', params: { rows: scope.row } })"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination clearfix">
      <el-pagination
        class="float-right"
        :current-page="BindForm.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="BindForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/** 员工详情 */
import { storeOrderAdminlist } from '@/api/customAPI/shop/store'
export default {
  name: 'StaffDetail',
  data() {
    return {
      loading: false,
      BindForm: {
        mobile: '',
        province: '',
        city: '',
        county: '',
        storeId: '',
        deliverManId: '',
        sendStat: '',
        pickStat: '',
        isSettle: '',
        pageNum: 1,
        pageSize: 10
      },
      pages: {
        total: 0
      },
      radio1: '全部订单',
      Bindata: [],
      popSty: false,
      textarea: '',
      tableData: [],
      dataInfo: null
    }
  },
  created() {},
  activated() {
    this.dataInfo = JSON.parse(sessionStorage.getItem('StaffDetail'))
    console.log(this.dataInfo, 'StaffDetail')
    this.getStoreOrderlist()
  },
  mounted() {
    this.dataInfo = JSON.parse(sessionStorage.getItem('StaffDetail'))
    this.getStoreOrderlist()
  },
  methods: {
    handelisSettle() {
      this.BindForm.sendStat = ''
      this.BindForm.pickStat = ''
      this.getStoreOrderlist()
    },
    handelpickStat() {
      this.BindForm.isSettle = ''
      this.BindForm.sendStat = ''
      this.getStoreOrderlist()
    },
    handelSend() {
      this.BindForm.isSettle = ''
      this.BindForm.pickStat = ''
      this.getStoreOrderlist()
    },
    /** 获取员工商品列表 */
    getStoreOrderlist() {
      this.loading = true
      this.BindForm.deliverManId = this.dataInfo.id
      storeOrderAdminlist(this.BindForm)
        .then(result => {
          this.Bindata = result.data.data.rows
          this.pages.total = result.data.data.total
          this.loading = false
        })
        .catch(err => {
          this.loading = false
          this.$message.warning(err)
        })
    },
    iconBj() {
      this.popSty = true
    },
    popClear() {
      this.popSty = false
      this.textarea = ''
    },
    popEnd() {
      this.popSty = false
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return {
            rowspan: row,
            colspan: 2
          }
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else if (rowIndex === 1) {
        return 'display:none'
      } else {
        return ''
      }
    },
    handleSizeChange(v) {
      this.BindForm.pageSize = v
      this.getStoreOrderlist()
    },
    handleCurrentChange(v) {
      this.BindForm.pageNum = v
      this.getStoreOrderlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
.StaffDetail {
  .float-right {
    float: right;
  }
  padding: 50px 100px;
  .search-key {
    padding: 40px;
    background: #f3f3f3;
    border-radius: 5px;
  }
  .radio-group {
    margin-top: 50px;
  }
  .search-key {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    .left {
      width: 500px;
      p {
        font-size: 15px;
        b {
          margin-right: 15px;
        }
        span {
          color: rgb(32, 32, 32);
          margin: 0px 10px;
        }
      }
      .ele-custom {
        display: flex;
        justify-content: space-between;
      }
    }
    .right {
      width: 400px;
      display: flex;
      justify-content: space-between;
      div {
        background: white;
        width: 180px;
        height: 100px;
        border-radius: 5px;
        display: flex;
        padding: 0px 20px;
        align-items: center;
      }
    }
  }
  .data-table {
    margin-top: 30px;
  }
  .pagination {
    margin: 50px 0px;
  }

  //   ****

  .el-table--enable-row-transition >>> .el-table__body td {
    padding-top: 2%;
  }
  ::v-deep .el-table tr {
    position: relative;
    width: 100%;
  }
  ::v-deep .cell {
    padding-top: 3%;
  }
  .item {
    width: 115.5em;
    background: #eee;
    padding: 1% 0;
    position: absolute;
    top: 0;
    left: -120px;
    z-index: 1;
    padding-left: 20px;
  }

  .hint_pr {
    padding-left: 10vh;
  }
  .imgSty {
    width: 80px;
    display: block;
  }
  .div-baoguo {
    background: #11a4c9;
    color: white;
    border-radius: 5px;
    text-align: center;
  }
  .mesSty {
    display: flex;
    align-items: center;
  }
  .pb_sty span {
    font-size: 12px;
    color: gray;
  }

  .mesFont p {
    margin-block-start: 0;
    margin-block-end: 0;
  }
  .mesFont p:first-child {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .iconSty {
    float: right;
    cursor: pointer;
  }
}
</style>
